<template>
  <view class="bt-box">
	
	<u-button v-if="status!=2" :custom-style="{
	  height: '63rpx',
	  width: '255rpx',
	  background: 'linear-gradient(110deg, #f772d1 0%, #c872f2 100%)',
	  borderRadius: '26rpx',
	}" hover-class="none" type="primary" @click="fabua(releaseId)">
		<text>{{$t("编辑商品")}}</text>
	</u-button>
	  
    <u-button v-if="status!=2" :custom-style="{
      height: '63rpx',
      width: '255rpx',
      background: 'linear-gradient(110deg, #DD2910 0%, #F79B29 100%)',
      borderRadius: '26rpx',
    }" hover-class="none" type="primary" @click="xzClick(releaseId)">{{ $t('快捷发布') }}
    </u-button>

	
	<vipPopup v-if="vipShow" :show="vipShow" @change="clickVipPopup" />
	<view style="background: #fff;position: fixed;top: 30%;width: 80%;right:10%;height: 580rpx;z-index: 111;margin-left:10%;border-radius: 24rpx;text-align: center;" v-if="xzshow && lang=='zh'">
		<view style="margin-top: 20rpx;font-size: 30rpx;font-weight: bolder;">
			{{$t("选择发布类型")}}
		</view>
		<view v-for="(item, index) in fblist"
		      :key="index"
		      :class="{ 'list-item': true, 'active': selectedIndexs === index }"
		      @click="selectItem(index)">
			{{ item.name }}
		</view>
		<view>
			<view style="font-size: 28rpx;background-image:linear-gradient(to right, #f3892c, #fc674d);color: #fff;width: 200rpx;text-align: center;border-radius: 36rpx;height: 70rpx;line-height: 70rpx;margin: 0 auto;margin-top: 35rpx;float: left;margin-left: 15%;" @click="fblxClick">
				{{$t("确认")}}
			</view>
			<view style="font-size: 28rpx;background-image:linear-gradient(to right, #f3892c, #fc674d);color: #fff;width: 200rpx;text-align: center;border-radius: 36rpx;height: 70rpx;line-height: 70rpx;margin: 0 auto;margin-top: 35rpx;float: left;margin-left: 20rpx;" @click="fbqxClick">
				{{$t("取消")}}
			</view>
		</view>
	</view>
	<view style="background: #fff;position: fixed;top: 30%;width: 80%;right:10%;height: 580rpx;z-index: 111;margin-left:10%;border-radius: 24rpx;text-align: center;" v-else-if="xzshow && lang=='ru'">
		<view style="margin-top: 20rpx;font-size: 30rpx;font-weight: bolder;">
			{{$t("选择发布类型")}}
		</view>
		<view v-for="(item, index) in fblist"
		      :key="index"
		      :class="{ 'list-items': true, 'active': selectedIndexs === index }"
		      @click="selectItem(index)">
			{{ item.name }}
		</view>
		<view>
			<view style="font-size: 28rpx;background-image:linear-gradient(to right, #f3892c, #fc674d);color: #fff;width: 200rpx;text-align: center;border-radius: 36rpx;height: 70rpx;line-height: 70rpx;margin: 0 auto;margin-top: 35rpx;float: left;margin-left: 15%;" @click="fblxClick">
				{{$t("确认")}}
			</view>
			<view style="font-size: 28rpx;background-image:linear-gradient(to right, #f3892c, #fc674d);color: #fff;width: 200rpx;text-align: center;border-radius: 36rpx;height: 70rpx;line-height: 70rpx;margin: 0 auto;margin-top: 35rpx;float: left;margin-left: 20rpx;" @click="fbqxClick">
				{{$t("取消")}}
			</view>
		</view>
	</view>
	<view style="background: #fff;position: fixed;top: 40%;right:7%;width: 86%;height: 400rpx;z-index: 1111111;margin-left:7%;border-radius: 24rpx;text-align: center;" v-if="fblxshow">
		<view style="margin-top: 20rpx;font-size: 30rpx;font-weight: bolder;">
			{{$t("是否推广置顶发布")}}
		</view>
		<view v-for="(item, index) in zdlist"
		      :key="index"
		      :class="{ 'zdlist-item': true, 'activezd': selectedIndexzd === index }"
		      @click="selectItemzd(index)">
			{{ item.name }}
		</view>
		<view>
			<view style="font-size: 28rpx;background-image:linear-gradient(to right, #f3892c, #fc674d);color: #fff;width: 200rpx;text-align: center;border-radius: 36rpx;height: 70rpx;line-height: 70rpx;margin: 0 auto;margin-top: 35rpx;float: left;margin-left: 18%;" @click="quickRelease">
				{{$t("确认")}}
			</view>
			<view style="font-size: 28rpx;background-image:linear-gradient(to right, #f3892c, #fc674d);color: #fff;width: 200rpx;text-align: center;border-radius: 36rpx;height: 70rpx;line-height: 70rpx;margin: 0 auto;margin-top: 35rpx;float: left;margin-left: 20rpx;" @click="qxzdClick">
				{{$t("取消")}}
			</view>
		</view>
	</view>
	<view v-if="isModalVisible" class="modal-background" @click="closeModal"></view>
  </view>
</template>
<script>

import {createC2CConversation} from "@/common/public";
	import vipPopup from "@/components/vipPopup/index.vue";
import app from "@/main";

export default {
  props: {
    type: {
      type: Number,
      default: 1,
      required: true,
    },
    toMobile: {
      type: String,
      default: '',
      required: false,
    },
    releaseId: {
      type: Number,
      default: 0,
      required: false,
    },
    releaseType: {
      type: String,
      default: '',
      required: false,
    },
	// 0.我发布的 1.我参与的 2.进行中 3.已完成
	status:{
		type:[Number,String],
		default:''
	}
	
  },
  data() {
    return {
	  isModalVisible: false,
      lang: getApp().globalData.lang,
      showJoin: true,
	  auth: '',
	  
	  vipShow: false,
	  //后台开关验证 vip权限
	  vip:false,
	  
	  fblist: [
	  	{ name: this.$t('商家推广-货物出售') },
	  	{ name: this.$t('竞标发布-有货求车') },
	  	{ name: this.$t('竞标发布-跨境货代') },
	  	{ name: this.$t('竞标发布-货源信息') }
	    ],
	  selectedIndexs: 0 ,// 初始未选中任何项
	  xzshow:false,
	  fblxshow:false,
	  zdlist: [
	  	{ name: this.$t('否') },
	  	{ name: this.$t('是') }
	    ],
	  selectedIndexzd: 0, // 初始未选中任何项
	  id:0,
	  is_topping:1,
    }
  },
  mounted() {
    this.checkShow()
	uni.showLoading({
		title:"Loading...",
		mask:true
	})
	this.getUserAuth() // 获取用户权限
	this.$u.api.user.appCheck().then(res => {
		this.report = res.report
		this.vip = res.vip
	})
  },
  components:{vipPopup},
  computed: {},
  methods: {
	  quickRelease(){
	  	if(this.selectedIndexzd==0){
	  		this.is_topping=1
	  	}else{
	  		this.is_topping=2
	  	}
	  	this.$u.api.user.quickRelease({
	  		id:this.id,
	  		is_topping:this.is_topping
	  	}).then(res => {
	  		uni.redirectTo({
	  			url: '/pages/user/goods/goodslist'
	  		  });
	  	})
	  },
	  selectItemzd(index) {
	    this.selectedIndexzd = index;
	  },
	  selectItem(index) {
	    this.selectedIndexs = index;
	  },
	  xzClick(id) {
	  	this.id=id
	  	console.log(this.id)
	  	if(this.xzshow==true){
	  		this.xzshow=false
	  	}else{
	  		this.xzshow=true
	  	}
		this.isModalVisible = true
	  },
	  closeModal(event) {
	    // 阻止事件冒泡，防止点击事件穿透到下面的元素
	    event.stopPropagation();
	    this.isModalVisible = false;
	    this.xzshow=false;
	    this.fblxshow=false;
	  },
	  fbqxClick(){
	  	this.xzshow=false
		this.isModalVisible = false
	  },
	  // qxzdClick(){
	  // 	this.fblxshow=false
	  // },
	  fblxClick(){
	  	console.log(this.selectedIndexs)
	  	if(this.selectedIndexs==0){
	  		this.fblxshow=true
	  	}else if(this.selectedIndexs==1){
	  		this.$u.route('/pages/release/transport/form?type=2')
	  	}else if(this.selectedIndexs==2){
	  		this.$u.route('/pages/release/crossborder/form?type=2')
	  	}else if(this.selectedIndexs==3){
	  		this.$u.route('/pages/release/transport/form?type=2')
	  	}
	  	this.xzshow=false
	  	// if(this.fblxshow==true){
	  	// 	this.fblxshow=false
	  	// }else{
	  	// 	this.fblxshow=true
	  	// }
	  },
	  qxzdClick(){
	  	this.fblxshow=false
		this.isModalVisible = false;
	  },
	  clickVipPopup() {
	  	this.vipShow = false
	  },
	  getUserAuth() {
	  	const that = this
	  		that.$u.api.user.getUserAuth().then(res => {
	  			that.auth = res
				uni.hideLoading()
	  		})
	  },
    checkShow() {// 判断是否显示参与竞标按钮
      this.$u.api.order.checkJoinShow({
        release_id: this.releaseId,
        type: this.releaseType,
      }).then(res => {
        if (res.show === true) {
          this.showJoin = true
        } else {
          this.showJoin = false
        }
      })
    },
	
	fabua(id){
		console.log(id)
		this.$u.route({
			url: "/pages/user/goods/form",
			params: {
				id: id,
			}
		})
	},
	
    communicate() {
		createC2CConversation(this.toMobile, this)
		
    },
    
  }
}
</script>

<style lang="scss" scoped>
.bt-box {
  height: 140rpx;
  position: fixed;
  display: flex;
  bottom: 0;
  left: 0;
  width: 100%;
  // display: flex;
  flex-direction: row;
  align-items: center;
  // justify-content: center;
  justify-content: space-around;
  background-color: #FFFFFF;
  border-top: 1px solid #f1f1f1;
}
.list-item {
	  padding: 23rpx 18rpx;
	  font-size: 28rpx;
	  // background: #018ff2;
	  width: 50%;
	  color: #000;
	  border-radius: 12rpx;
	  margin: 0 auto;
	  margin-top: 3%;
	}
	
	.list-items {
		  padding: 23rpx 18rpx;
		  font-size: 28rpx;
		  // background: #018ff2;
		  width: 90%;
		  color: #000;
		  border-radius: 12rpx;
		  margin: 0 auto;
		  margin-top: 3%;
		}
	 
	.active {
	  background-color: #018ff2; /* 选中的颜色 */
	  color: #fff;
	}
	
	.zdlist-item {
	  padding: 23rpx 18rpx;
	  font-size: 28rpx;
	  width: 50%;
	  color: #000;
	  border-radius: 12rpx;
	  margin: 0 auto;
	  margin-top: 5%;
	}
	 
	.activezd {
	  background-color: #018ff2; /* 选中的颜色 */
	  color: #fff;
	}
	
	.modal-background {
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background-color: rgba(0, 0, 0, 0.5);
	}
</style>
